<template>
  <page-header-wrapper>
    <a-card
      style="margin-top: 24px"
      :bordered="false"
      title="租车记录">
      <div slot="extra">
        <a-radio-group v-model="status">
          <a-radio-button value="all">全部</a-radio-button>
        </a-radio-group>
        <a-input-search style="margin-left: 16px; width: 272px;" />
      </div>
      <div class="table-operator">
        <a-button type="primary" icon="plus" @click="handleAdd">新建</a-button>
      </div>
    </a-card>
    <div>
      <s-table
        ref="table"
        size="default"
        :localLoading="tableLoading"
        :rowKey="(record) => record.id"
        :columns="columns"
        :data="loadData"
      >
        <span slot="status" slot-scope="text">
          <a-tag color="orange" v-if="text === 0">
            租用中
          </a-tag>
          <a-tag color="red" v-if="text === 1">
            已结束
          </a-tag>
          <a-tag color="#2db7f5" v-if="text === 2">
            已归还
          </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
          <a
            @click="toRentCar(record)"
          >
            还车
          </a>
          <!-- <a-divider type="vertical"/>
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down"/>
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a-popconfirm
                  title="Are you sure delete this task?"
                  ok-text="Yes"
                  cancel-text="No"
                  @confirm="confirmDelete(record.id)"
                  @cancel="cancelDelete"
                >
                  <a href="#">删除记录</a>
                </a-popconfirm>
              </a-menu-item>
            </a-menu>
          </a-dropdown> -->
        </span>
      </s-table>
      <detail
        v-if="detailBoxVisible"
        :title="modalTitle"
        :update="modalUpdate"
        :visible="detailBoxVisible"
        :model="model"
        @cancel="() => { this.detailBoxVisible = false }"
        @ok="modalOk"
      />
    </div>
  </page-header-wrapper>
</template>

<script>
import { rentScooterLogs, rentScooterToCarShip } from '@/api/global'
import { STable } from '@/components'
// import Detail from './Detail'
// import Logs from './Logs'

export default {
  name: 'CabinetLists',
  data () {
    return {
      modalTitle: '详情',
      modalUpdate: false,
      model: {},
      detailData: {},
      detailBoxVisible: false,
      tableLoading: false,
      status: 'all',
      pagination: {
        pageSize: 10,
        pageNo: 1,
        total: 1
      },
      columns: [
        {
          title: '柜号',
          dataIndex: 'id'
        },
        {
          title: '车牌号',
          dataIndex: 'scooter.id'
        },
        {
          title: '所属车行',
          dataIndex: 'rental.name'
        },
        {
          title: '租用人',
          dataIndex: 'renter.nickName'
        },
        {
          title: '租用人手机号',
          dataIndex: 'renter.phoneNumber'
        },
        {
          title: '开始时间',
          dataIndex: 'beginTime',
          customRender: (text) => {
            return (text) ? this.timeFormat(text) : text
          }
        },
        {
          title: '结束时间',
          dataIndex: 'endTime',
          customRender: (text) => {
            return (text) ? this.timeFormat(text) : text
          }
        },
        {
          title: '归还时间',
          dataIndex: 'returnTime',
          customRender: (text) => {
            return (text) ? this.timeFormat(text) : text
          }
        },
        {
          title: '状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' }
        }
      ],
      loadData: paramter => {
        console.log(paramter.pageNo)
        const pageSize = 10
        return rentScooterLogs({ $skip: paramter.pageSize * (paramter.pageNo - 1), $limit: pageSize, '$sort[id]': 1 }).then(res => {
          const totalCount = parseInt(res.headers['x-count'])
          const rtData = {
            data: res.data,
            pageSize: pageSize,
            pageNo: paramter.pageNo,
            totalPage: totalCount / pageSize,
            totalCount: totalCount
          }
          console.log(res.headers)
          return rtData
        })
      }
    }
  },
  components: {
    STable
  },
  created () {
    // this.init()
  },
  methods: {
    toRentCar (record) {
      rentScooterToCarShip(record.scooter.id, record.rental.id).then(res => {
        this.$notification['success']({
          message: '提示',
          description: record.scooter.id + '还车成功'
        })
        this.$refs.table.refresh(false)
      }).catch(e => {
        this.$notification['error']({
          message: '提示',
          description: record.scooter.id + '还车失败，请检查车辆是否停稳，设备是否正常连接到网络'
        })
      })
    },
    handleAdd () {
      this.model = null
      this.modalUpdate = false
      this.modalTitle = '新增'
      this.detailBoxVisible = true
    },
    cancelDetailBox () {
      this.detailBoxVisible = false
    },
    toDetail (item) {
      this.model = item
      this.modalUpdate = true
      this.modalTitle = '详情'
      this.detailBoxVisible = true
    },
    refresh () {
      this.init()
    },
    cancelDelete () {

    },
    confirmDelete (id) {
      // cabinetDelete(id).then(res => {
      //   this.tableLoading = false
      //   this.refresh()
      //   this.$notification['success']({
      //     message: '提示',
      //     description:
      //       '删除数据成功！'
      //   })
      // }).catch(e => {
      //   this.$notification['error']({
      //     message: '提示',
      //     description:
      //       '删除数据失败！'
      //   })
      //   console.error(e)
      // })
    },
    init () {
      this.$refs.table.refresh()
    },
    modalOk () {
      this.detailBoxVisible = false
      this.$refs.table.refresh(false)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
